<template>
  <div class="com_contalner">
    <div class="box-in">
      <div class="detail-container">
        <el-steps :active="1" align-center finish-status="success">
          <el-step title="提交订单" :description="date" />
          <el-step title="支付订单" />
          <el-step title="平台发货" />
          <el-step title="确认收货" />
          <el-step title="完成评价" />
        </el-steps>
      </div>

      <div class="main-body">
        <div class="status">
          <div style="text-align: center">
            <el-icon color="red">
              <WarningFilled />
            </el-icon>
            <span style="color: red">当前状态订单:已关闭</span>
          </div>
          <div>
            <el-button @click="del">删除订单</el-button>
            <el-button @click="open">备注订单</el-button>
          </div>
        </div>
        <div style="padding: 15px">
          <div style="margin-bottom: 15px; font-size: 14px">
            <el-icon>
              <Briefcase />
            </el-icon>
            <span>基本信息</span>
          </div>
          <el-table
            :border="true"
            :data="tableData"
            style="width: 100%"
            :cell-style="cellstyle"
            :header-cell-style="headercellstyle"
            table-layout="fixed"
          >
            <el-table-column prop="orderSn" label="订单编号" />
            <el-table-column label="发货单流水号"> 暂无 </el-table-column>
            <el-table-column prop="memberUsername" label="用户账号" />
            <el-table-column prop="payType" label="支付方式" />
            <el-table-column prop="sourceType" label="订单来源" />
            <el-table-column label="订单类型"> 正常订单 </el-table-column>
          </el-table>
          <el-table
            :border="true"
            :data="tableData"
            style="width: 100%"
            :cell-style="cellstyle"
            :header-cell-style="headercellstyle"
            table-layout="fixed"
          >
            <el-table-column label="配送方式">
              <template #default="scope">
                <div>
                  {{
                    scope.row.deliveryCompany == ""
                      ? "暂无"
                      : scope.row.deliveryCompany
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="物流单号">
              <template #default="scope">
                <div>
                  {{
                    scope.row.deliverySn == "" ? "暂无" : scope.row.deliverySn
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="autoConfirmDay" label="自动收货时间">
              <template #default="scope">
                <div>{{ scope.row.autoConfirmDay }}天</div>
              </template>
            </el-table-column>
            <el-table-column prop="growth" label="订单可得优币" />
            <el-table-column prop="integration" label="订单可得值" />
            <el-table-column label="活动信息">
              <template #default="scope">
                <div class="sl">
                  {{ scope.row.promotionInfo }}
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div style="padding: 20px 0; font-size: 14px">
            <el-icon>
              <Briefcase />
            </el-icon>
            <span>收货人信息</span>
          </div>
          <el-table
            :border="true"
            :data="tableData"
            style="width: 100%"
            :cell-style="cellstyle"
            :header-cell-style="headercellstyle"
            table-layout="fixed"
          >
            <el-table-column prop="receiverName" label="收货人" />
            <el-table-column prop="receiverPhone" label="手机号码" />
            <el-table-column prop="receiverPostCode" label="邮政编码" />
            <el-table-column label="收货地址">
              <template #default="scope">
                <div>
                  {{ scope.row.receiverProvince }} {{ scope.row.receiverCity }}
                  {{ scope.row.receiverRegion }}
                  {{ scope.row.receiverDetailAddress }}
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div style="padding: 15px 0; font-size: 14px">
            <el-icon>
              <Briefcase />
            </el-icon>
            <span>商品信息</span>
          </div>
          <el-table
            :border="true"
            :data="orderdata"
            style="width: 100%; margin-bottom: 50px"
            :cell-style="cellstyle"
            :header-cell-style="headercellstyles"
          >
            <el-table-column label="商品图片" width="120">
              <template #default="scope">
                <img
                  :src="scope.row.productPic"
                  alt=""
                  style="width: 80px; height: 80px"
                />
              </template>
            </el-table-column>
            <el-table-column label="商品名称"
              ><template #default="scope">
                {{ scope.row.productName }}
                <br />
                品牌：{{ scope.row.productBrand }}
              </template>
            </el-table-column>
            <el-table-column label="价格/货号" width="160">
              <template #default="scoped">
                <div>￥{{ scoped.row.productPrice }}</div>
                <div>货号:{{ scoped.row.productSn }}</div>
              </template>
            </el-table-column>
            <el-table-column label="属性" width="160">
              <template #default="scoped">
                <span v-for="arr in JSON.parse(scoped.row.productAttr)">
                  {{ arr.key }}:{{ arr.value }}<br />
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="productQuantity" label="数量" width="160" />
            <el-table-column label="小计" width="150">
              <template #default="scoped">
                ￥{{ scoped.row.productPrice }}
              </template>
            </el-table-column>
          </el-table>

          <div style="padding: 20px 0; font-size: 14px">
            <el-icon>
              <Briefcase />
            </el-icon>
            <span>费用信息</span>
          </div>
          <el-table
            :border="true"
            :data="tableData"
            style="width: 100%"
            :cell-style="cellstyle"
            :header-cell-style="headercellstyle"
            table-layout="fixed"
          >
            <el-table-column label="商品合计">
              <template #default="scope">
                <div>¥ {{ scope.row.totalAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column label="运费">
              <template #default="scope">
                <div>¥ {{ scope.row.freightAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column label="优惠券">
              <template #default="scope">
                <div>- ¥ {{ scope.row.discountAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column label="积分抵扣">
              <template #default="scope">
                <div>- ¥ {{ scope.row.integrationAmount }}</div>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :border="true"
            :data="tableData"
            style="width: 100%"
            :cell-style="cellstyle"
            :header-cell-style="headercellstyle"
            table-layout="fixed"
          >
            <el-table-column label="活动优惠">
              <template #default="scope">
                <div>- ¥ {{ scope.row.promotionAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column label="折扣金额">
              <template #default="scope">
                <div>¥ {{ scope.row.discountAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column label="订单总金额">
              <template #default="scope">
                <span style="color: red"> ¥ {{ scope.row.totalAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="应付款金额">
              <template #default="scope">
                <span style="color: red"> ¥ {{ num }} </span>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 20px 0; font-size: 14px">
            <el-icon>
              <Briefcase />
            </el-icon>
            <span>操作信息</span>
          </div>
          <el-table
            :border="true"
            :data="historydata"
            style="width: 100% text-align: center;"
            :cell-style="cellstyle"
            :header-cell-style="headercellstyles"
          >
            <el-table-column label="操作者">
              <template #default="scope" width="120">
                <div>{{ scope.row.operateMan }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作时间" width="200">
              <template #default="scope">
                <div>
                  {{
                    scope.row.createTime
                      ? dayjs(scope.row.createTime).format(
                          "YYYY-MM-DD HH:mm:ss"
                        )
                      : "/"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="订单状态" width="100">
              <template #default="scoped">
                {{
                  scoped.row.orderStatus == 0
                    ? "待处理"
                    : scoped.row.orderStatus == 1
                    ? "退货中"
                    : scoped.row.orderStatus == 2
                    ? "已发货"
                    : scoped.row.orderStatus == 3
                    ? "已拒绝"
                    : "已关闭"
                }}
              </template>
            </el-table-column>
            <el-table-column label="付款状态" width="100">
              <template #default="scoped">
                {{
                  scoped.row.orderStatus == 0
                    ? "待处理"
                    : scoped.row.orderStatus == 1
                    ? "退货中"
                    : scoped.row.orderStatus == 2
                    ? "已支付"
                    : scoped.row.orderStatus == 3
                    ? "已拒绝"
                    : "已退款"
                }}
              </template>
            </el-table-column>
            <el-table-column label="发货状态" width="100">
              已发货
            </el-table-column>
            <el-table-column label="备注" width="606">
              <template #default="scoped">
                {{ scoped.row.note }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" title="备注订单">
    <el-form :model="form">
      <el-form-item label="操作备注：" label-width="140px">
        <el-input v-model="form" autocomplete="off" type="textarea" :rows="8" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onSure"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import dayjs from "dayjs"; // ES 2015
import { WarningFilled, Briefcase } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import * as api from "@/request/api";
import type { Iorder } from "@/request/OmsOrderReturnApplyController";
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/es/components/message/style/css";
import "element-plus/es/components/message-box/style/css";


let route = useRoute();
let tableData: any = reactive([]);
const orderdata = ref();
const historydata = ref();
const num = ref(0);
const date = ref("");
const dialogFormVisible = ref(false);
const form = ref();

let getdata = async () => {
  let res: Iorder = await api.returnApply.getOrder(route.query.id);
  tableData.push(res);
  date.value = dayjs(res.createTime).format("YYYY-MM-DD HH:mm:ss");
  orderdata.value = res.orderItemList;
  num.value = res.totalAmount - res.promotionAmount;
  historydata.value = res.historyList;
};
getdata();

let cellstyle = () => {
  return {
    textAlign: "center",
    padding: "10px",
    height: "60px",
  };
};
let headercellstyle = () => {
  return {
    textAlign: "center",
    background: "#f2f6fc",
    color: "#303133",
  };
};
let headercellstyles = () => {
  return {
    textAlign: "center",
    color: "#303133",
  };
};

let onSure = () => {
  console.log(tableData[0].id);

  // 发请求
  ElMessageBox.confirm("是否要备注订单?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let res = await api.returnApply.OrderUpdate({
      id: tableData[0].id,
      note: form.value,
      status: tableData[0].status,
    });
    //  重新调用请求
    getdata();
    dialogFormVisible.value = false;

    ElMessage({
      type: "success",
      message: "订单备注成功!",
    });
    // 清空内容
    form.value = "";
  });
};

let open = () => {
  console.log(321);
  dialogFormVisible.value = true;
};
</script>

<style lang="scss" scoped>
.com_contalner {
  padding: 10px 20px;
  height: 100%;

  .detail-container {
    // padding: 20px;
    margin: 20px auto;
  }

  .box-in {
    width: 80%;
    margin: 20px auto;

    .main-body {
      border: 1px solid #ebeef5;
      margin-top: 15px;
      color: #303133;
      border-radius: 4px;
    }
    .status {
      background: #f2f6fc;
      height: 80px;
      padding: 20px;
      line-height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }
  }
  .sl {
    width: 100px; /*要显示文字的宽度*/
    overflow: hidden; /*超出的部分隐藏起来。*/
    white-space: nowrap; /*不显示的地方用省略号...代替*/
    text-overflow: ellipsis; /* 支持 IE */
    margin: auto;
  }
}
</style>
